<template>
	<view class="tabs flexR" :class="flex">
		<view v-for="(item,i) in list" :key='i' class="tab" @click="handleTab(i)">
			<text :class="current===i?'active-color':''">{{item.name}}</text>
			<view class="center">
				<view class="bar" :class="current===i?'active':''"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			current: {
				type: Number,
				default: 0
			},
			flex: {
				type: String,
				default: 'between'
			}
		},
		methods: {
			handleTab(i) {
				this.$emit('handleChange', i)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.between {
		justify-content: space-between;
	}

	.center {
		justify-content: center;
	}

	.start {
		justify-content: flex-start;
	}

	.end {
		justify-content: flex-end;
	}

	.tabs {
		align-items: center;
		font-size: 16px;

		.tab {
			position: relative;
			margin-right: 10px;

			.bar {
				height: 0;
				width: 0;
				background-color: $uni-bg-color;
				position: absolute;
				bottom: -5px;
			}

			.active-color {
				font-weight: bold;
			}

			.active {
				height: 10rpx;
				width: 40%;
				background-color: #41CFE6;
				transition: all .2s;
				border-radius: 16rpx;
			}
		}
	}
</style>